<template>
    <div>
        <!-- 一个类似QQ音乐的纯色背景图选择！！！ -->
        <!-- 我的想法是这样的，需要将纯色背景颜色存在Vue的数组当中！ -->
        <div class="color_wrap">

            <div @dblclick="changeImg(img)" v-for="img, index in images" :key="index" class="pointer color_item">
                <img v-lazy="img" :alt="index">
            </div>

        </div>
        <el-slider v-model="blurValue" :max="20"></el-slider>
    </div>
</template>

<script>
export default {
    data() {
        return {
            images: ["https://ts1.cn.mm.bing.net/th/id/R-C.4916ae24359cc04c016a55f2575d757c?rik=amT%2bF%2bXTtedvlw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140610%2f1-140610235530.jpg&ehk=7FA8owEIjU1Cd6IMA8r30ZMwdiI8KOAjzZrapTph22k%3d&risl=&pid=ImgRaw&r=0",
                "https://pic1.zhimg.com/v2-b417dd08616723ef1ad531f5fd8e1d4f_r.jpg?source=1940ef5c",
                "https://pic1.zhimg.com/v2-5bc1f1dfd6b29a08e521b531cae39fe7_r.jpg?source=1940ef5c",
                "https://pic2.zhimg.com/v2-8176dbd89ee8edecf5956bae2dd0642d_r.jpg?source=1940ef5c",
                "https://pic4.zhimg.com/v2-f9993e030fec1f09cf4e49997fba35bf_r.jpg?source=1940ef5c",
                "https://pic2.zhimg.com/v2-d6d0c956d30aa63894cc1cc96901ce07_r.jpg?source=1940ef5c",
                "https://ts1.cn.mm.bing.net/th/id/R-C.32def6d28a658837bd208ff1029d68d6?rik=sSsBaD03zAfQAg&riu=http%3a%2f%2fpic.xoyo.com%2fhu%2fattachment%2f201108%2f14%2f203141_13132866524jBq.jpg&ehk=LO3ITQVp6C12Vw6Gw1FOIHRv64ve%2bBsxuLlb3NQ2g4g%3d&risl=&pid=ImgRaw&r=0",
                "https://ts1.cn.mm.bing.net/th/id/R-C.5f349f3cc0af1b3812e640d829d96d56?rik=tDu2oM8Cvs61lQ&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f57%2f157_18.jpg&ehk=fvF5qTNYB64OBQkxLDgdjfMNE8SxrU6LNE3nq2XkH3I%3d&risl=&pid=ImgRaw&r=0",
                "https://pic2.zhimg.com/v2-70119c437cff012b67f2bcc385f4180e_r.jpg?source=1940ef5c",
                "https://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/c8177f3e6709c93daddde149983df8dcd1005465.jpg",
                "https://pic3.zhimg.com/v2-6b70d17c2ebb5c7fc78d0f43bb03ce4c_r.jpg?source=1940ef5c",
                "https://ts1.cn.mm.bing.net/th/id/R-C.0f0a2b945c0e3f62e1d83b4c88d4bba4?rik=WpGzkfCmRcOJJg&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f45%2f1945.jpg&ehk=c40fiJaFs9wU9rtOjPfhJTm26OqN3K%2bGUUTn%2bU6KI3g%3d&risl=&pid=ImgRaw&r=0",
                "https://ts1.cn.mm.bing.net/th/id/R-C.53e2d17fd14a8d89b92877875090947d?rik=5T0QIJCOWklwDg&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f6%2f4406.jpg&ehk=zGB%2boUvth63yYCY3O1dni25navGUipPUYgrXB%2bHBJjA%3d&risl=&pid=ImgRaw&r=0",
                "https://ts1.cn.mm.bing.net/th/id/R-C.e4ad20946dadbe4ea8808808742ddac9?rik=Kj7gin%2fF0%2f0sWA&riu=http%3a%2f%2fpic.zsucai.com%2ffiles%2f2013%2f0711%2fkeaxqx5.jpg&ehk=a0v6uIdIsM%2bYz3YFeDEHEGBh0VeSwqi8Lecrm6Ev5JY%3d&risl=&pid=ImgRaw&r=0",
                "https://ts1.cn.mm.bing.net/th/id/R-C.ca27287e0f616b6bac262792e7f9d76c?rik=OSRTaycWU0SIiw&riu=http%3a%2f%2fi2.hdslb.com%2fbfs%2farchive%2f7a7b366359afc4ac4d9b8b0e00467aa0117aa8a3.png&ehk=o9gFW2q7%2fhl3xUvVVkOW60V1MfkVvkfvDTGNP9AVw8k%3d&risl=1&pid=ImgRaw&r=0",
            ],//网络推荐图片
            blurValue:6
        }
    },
    mounted(){
        let blur=localStorage.getItem("blur")
        if(blur)this.blurValue=Number(blur);
    },
    methods:{
        changeImg(imgUrl){
            //本地存储背景图片链接，通知组件进行背景更换！
            //我觉的还是让他将数据发送到APP组价中去进行更换
            this.$bus.$emit("sendIMG",imgUrl)
            //在这里去本地存一份
            localStorage.setItem("backgroundIMG",imgUrl);
        }
    },
    watch:{
        blurValue(newVal){
           this.$bus.$emit("changeBlur",newVal);
           localStorage.setItem("blur",newVal);
        }
    }
}
</script>

<style scoped lang="less">
.color_wrap {
    padding: 0px 60px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 40px;

    @media screen and (max-width: 1200px) {
        & {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .color_item {
        height: 100px;
        width: 200px;
        border-radius: 10px;

        img {
            width: 100%;
            border-radius: 10px;
        }
    }
}
</style>
